import React, { Component } from 'react';
import { Table, Icon, Popconfirm } from 'antd';
import moment from 'moment';

export default class FormTable extends Component{
    constructor(props){
        super(props);
    }
    render(){
        const { checkChange, onDelete, editClick, dataSource, loading } = this.props;
        const rowSelection = {
                onChange: checkChange,
                getCheckboxProps: record => ({
                disabled: record.title === 'Disabled goods', // Column configuration not to be checked
            }),
        };
        const columns = [{
            title: '商品名称',
            dataIndex: 'title',
            width: 80,
        }, {
            title: '库存',
            dataIndex: 'inventory',
            width: 80,
        }, {
            title: '价格',
            dataIndex: 'price',
            width: 80,
        },{
            title: '商品描述',
            dataIndex: 'description',
            width: 180,
        },{
            title: '是否包邮',
            dataIndex: 'isFreeShipping',
            filters: [
                { text: '是', value: '是' },
                { text: '否', value: '否' },
            ],
            onFilter: (value, record) => record.isFreeShipping.indexOf(value) === 0,
            width: 80,
        },{
            title: '是否热卖',
            dataIndex: 'isHot',
            filters: [
                { text: '是', value: '是' },
                { text: '否', value: '否' },
            ],
            onFilter: (value, record) => record.isHot.indexOf(value) === 0,
            width:80,
        },{
            title: '图片链接',
            dataIndex: 'imgUrl',
            width:120,
        },{
            title: '创建时间',
            dataIndex: 'createTime',
            sorter: (a, b) => moment(a.createTime) - moment(b.createTime),
            width:150,
        },{
            title: '操作',
            dataIndex: 'opera',
            width:100,
            render: (text, record) =>
                <div className='opera'>
                    <span onClick={() => editClick(record.id)}>
                         <Icon type="edit" /> 修改
                    </span><br />
                    <span><Popconfirm title="确定要删除吗?" onConfirm={() => onDelete(record.id)}><Icon type="minus-square-o" /> 删除 </Popconfirm></span>
                </div>
        }];
        return(
            <Table
                rowSelection={rowSelection}
                columns={columns}
                dataSource={dataSource}
                bordered={true}
                scroll={{x:'100%'}}
                className='formTable'
                loading={loading}
            />
        )
    }
}
